<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        #app{
            padding: 5vw;
        }
        .header,
        .mid{
            display: flex;
            justify-content: space-between;
            margin-bottom: 5vw;
        }
        .mid_left{
            display: flex;
            justify-content: space-between;
        }

        .mid_left img{
            width: 30vw;
            height: 30vw;
            margin-right: 1vw;
        }
        .mid_left div{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .mid_left div span{
            font-size: 5vw;
            color: red;
        }
        .mid_left div del{
            font-size: 3.5vw;
            color: gray;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <h3>已选商品</h3>
            <span @click="del()">清空</span>
        </div>
        <div v-for="(item,index) in arr" class="mid">
            <div class="mid_left">
                <img :src="item.jpg" alt="">
                <div>
                    <h5>{{item.name}}</h5>
                    <span>{{item.price}} <del>{{item.delPrice}}</del></span>
                </div>

            </div>
            <div class="mid_right">
                <span>-</span>1<span>+</span>
            </div>
        </div>

    </div>
</body>
</html>
<script src="../vue-2.5.21.js"></script>
<script>
var vm = new Vue({
    el:'#app',
    data:{
        arr:[
            {jpg:'img/2.JPG',name:'秋刀鱼/斤',price:'35',delPrice:'36'},
            {jpg:'img/3.JPG',name:'带鱼/条',price:'45',delPrice:'50'}
        ]
    },
    methods:{
        del(){
            this.arr.splice(0,this.arr.length)
        }
    }
})
</script>